{% extends "title_base.html"  %}<!-- extends引用统一的模板文件 -->
{% load staticfiles %}

{% block header_extends %}<!-- 第一个块 -->
    <link type="image/x-icon" rel="shortcut icon" href="{% static 'favicon.ico' %}">
    <link type="text/css" rel="stylesheet" href="{% static 'css/common.css' %}">
    <link type="text/css" rel="stylesheet" href="{% static 'css/index.css' %}">
    <!-- <link type="text/css" rel="stylesheet" href="{% static 'css/index.css' %}"> -->
{% endblock %}

{% block content  %}<!-- 第二个块，在block里面填充页面内容 -->
<body class="index">
    <!-- 最顶部的导航栏 -->
	<div class="header">
		<a href="/" class="logo" title="首页"><img alt="我的音乐" src="../static/image/logo.png"></a>
		<div class="search-box">
            <!-- html的表单 -->
            <form id="searchForm" action="{% url 'search' 1 %}" method="post" target="_blank">
            {% csrf_token %}
                <div class="search-keyword">
                    <input name="kword" type="text" class="keyword" maxlength="120" placeholder="音乐节" />
                </div>
                <input id="subSerch" type="submit" class="search-button" value="搜 索" />
            </form>
            <div id="suggest" class="search-suggest"></div>
            <!-- 在搜索框下面显示热门歌曲 -->
            <div class="search-hot-words">
                {% for song in search_song  %}
                    <a target="play" href="{% url 'play' song.song.song_id %}" >{{ song.song.song_name }}</a>
                {% endfor  %}
            </div>
  	    </div>
	</div>
    <!-- 搜索框下面的导航栏 -->
	<div class="nav-box">
        <div class="nav-box-inner">
            <ul class="nav clearfix">
                <li><a href="/">首页</a></li>
                <li><a href="{% url 'ranking' %}" target="_blank">歌曲排行</a></li>
                <li><a href="{% url 'home' 1 %}" target="_blank">用户中心</a></li>
            </ul>
        </div>
    </div><!--end nav-box-->
    <!-- 最左侧的音乐分类导航栏，中间的大图片，右侧栏热门歌曲模块 -->
	<div class="wrapper clearfix">
        <div class="category-nav">
            <div class="category-nav-header">
                <strong><a href="javascript:;" title="">音乐分类</a></strong>
            </div>
            <div class="category-nav-body">
                <div id="J_CategoryItems" class="category-items">
                    {% for label in label_list  %}
                        <div class="item" data-index="1">
                            <h3><a href="javascript:;">{{ label.label_name }}</a></h3>
                        </div>
                    {% endfor  %}
                </div>
            </div>
        </div>
		<div class="main">
			<div id="J_FocusSlider" class="focus">
				<div id="bannerLeftBtn" class="banner_btn"></div>
				<ul class="focus-list f_w">
                    <li class="f_s"><a target="play" href="{% url 'play' 12 %}" class="layz_load" >
                        <img data-src="{% static '/image/datu-1.jpg' %}"  width="750" height="275"></a>
                    </li>
					<li class="f_s"><a target="play" href="{% url 'play' 13 %}" class="layz_load" >
                        <img data-src="{% static '/image/datu-2.jpg' %}"  width="750" height="275"></a>
                    </li>
				</ul>
				<div id="bannerRightBtn" class="banner_btn"></div>
			</div>
		</div>
		<div class="aside">
			<h2>热门歌曲</h2>
			<ul>
				{% for song in play_hot_song  %}
					<li>
                        <span>{{ forloop.counter }}</span>
                        <a target="play" href="{% url 'play' song.song.song_id %}" >{{ song.song.song_name }}</a>
                    </li>
				{% endfor  %}
			</ul>
		</div>
	</div>
    <!-- 新歌推荐模块 -->
	<div class="today clearfix">
		<div class="today-header">
            <i></i>
			<h2>新歌推荐</h2>
		</div>
		<div class="today-list-box slide">
			<div id="J_TodayRec" class="today-list">
				<ul>
                    {% for list in daily_recommendation  %}
                        {% if forloop.first  %}
                            <li class="first">
                        {% else  %}
                            <li>
                        {% endif  %}
                        <a class="pic layz_load pic_po" target="play" href="{% url 'play' list.song_id %}" >
                            <img data-src="../static/songImg/{{ list.song_img }}"  ></a>
                        <div class="name">
                            <h3><a target="play" href="{% url 'play' list.song_id %}" >{{ list.song_name }}</a></h3>
                            <div class="singer"><span>{{ list.song_singer }}</span></div>
                            <div class="times">发行时间：<span>{{ list.song_release }}</span></div>
                        </div>
                        <a target="play" href="{% url 'play' list.song_id %}" class="today-buy-button" >去听听></a>
                    {% endfor  %}
				</ul>
			</div>
		</div>
	</div><!--end today-->
    <!-- 最底部的热门搜索、热门下载的功能模块 -->
	<div class="section">
		<ul id="J_Tab" class="tab-trigger">
            <li data-cur="0" id='tag_search' class="current t_c active">热门搜索</li>
            <li data-cur="1" id="tag_down" class="t_c">热门下载</li>
		</ul>
		<div class="tab-container" id="tab_search">
            <div id="J_Tab_Con" class="tab-container-cell">
                {% for list in all_ranking  %}
                    {% if forloop.first %}
                        <ul class="product-list clearfix t_s current">
                    {% else  %}
                        <ul class="product-list clearfix t_s" style="display:none;">
                    {% endif  %}
                    {% for songs in list  %}
                        <li>
                            <a target="play" href="{% url 'play' songs.song.song_id %}" class="pic layz_load pic_po" >
                                <img data-src="../static/songImg/{{ songs.song.song_img }}" ></a>
                            <h3><a target="play" href="{% url 'play' songs.song.song_id %}" >{{ songs.song.song_name }}</a></h3>
                            <div class="singer"><span>{{ songs.song.song_singer }}</span></div>

                            <div class="times">搜索次数：<span>{{ songs.dynamic_search }}</span></div>
                        </li>
                    {% endfor %}
                        </ul>
                {% endfor %}
            </div>
        </div>
        <div class="tab-container" id="tab_down" style="display: none;">
            <div id="J_Tab_Con" class="tab-container-cell">
                {% for list in all_ranking  %}
                    {% if forloop.first %}
                        <ul class="product-list clearfix t_s current">
                    {% else  %}
                        <ul class="product-list clearfix t_s" style="display:none;">
                    {% endif  %}
                    {% for songs in list  %}
                        <li>
                            <a class="pic layz_load pic_po" target="play" href="{% url 'play' songs.song.song_id %}"  >
                                <img data-src="../static/songImg/{{ songs.song.song_img }}" ></a>
                            <h3><a target="play" href="{% url 'play' songs.song.song_id %}" >{{ songs.song.song_name }}</a></h3>
                            <div class="singer"><span>{{ songs.song.song_singer }}</span></div>

                            <div class="times">下载次数：<span>{{ songs.dynamic_down }}</span></div>
                        </li>
                    {% endfor %}
                        </ul>
                {% endfor %}
            </div>
        </div>
    </div><!--end section-->
    <script data-main="{% static 'js/index.js' %}"></script>
    <script src="../static/js/require.js"></script>
    <script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
	<script type="text/javascript">

        $('#tag_search').click(function () {
            $('#tag_down').removeClass('active');
            $(this).addClass('active');
            $('#tab_search').show();
            $('#tab_down').hide();
        });

        $('#tag_down').click(function () {
            $('#tag_search').removeClass('active');
            $(this).addClass('active');
            $('#tab_search').hide();
            $('#tab_down').show();
        });
    </script>

{% endblock  %}
